<template>
  <div>
    <Header :head="head" />
    <router-link :to="path" class="myData">
      <img :src="img" alt />
      <div>
        <h4>{{userName}}</h4>
        <h4>{{binding}}</h4>
      </div>
    </router-link>
    <Balance :money="this.money" :integral="this.integral" :discount="this.discount" />
    <Service />
  </div>
</template>
<script>
import Header from '../common/Header'
import Balance from './Balance'
import Service from './Service'
export default {
  components: {
    Header,
    Balance,
    Service
  },
  data() {
    return {
      head: '我的',
      path: '/major/my/login',
      money: 0, //余额
      discount: 0, //优惠券(暂无)
      integral: 0, //积分
      userName: null, //用户名
      img: null,
      binding: '点击前往登录'
    }
  },
  created() {
    //从内存中获取用户信息
    let user = JSON.parse(localStorage.getItem('user'))
    if (user) {
      this.money = user.balance
      this.userName = user.username
      this.path = '/major/my/detailed'
      this.binding = '未绑定手机号'
      this.img = 'https://elm.cangdu.org/img/' + user.avatar
    } else {
      this.path = '/major/my/login'
      this.userName = '未登录'
      this.binding = '点击前往登录'
    }
  }
}
</script>
<style scoped>
.myData {
  display: flex;
  height: 25vw;
  padding: 5vw;
  background-color: #26a2ff;
}
img {
  height: 15vw;
  width: 15vw;
  margin-right: 5vw;
  border-radius: 50%;
  background-color: white;
}
h4:first-child {
  padding: 0;
  margin: 0;
  color: white;
  font-weight: bold;
  font-size: 7vw;
  width: 100%;
  display: block;
}
h4:last-child {
  padding: 0;
  margin: 0;
  color: white;
  font-size: 4vw;
}
a {
  text-decoration: none !important;
}
</style>